<template>
	<view :class="['c-cell-item', { border }]" @click="handleClick">
		<view class="cell-icon" :style="{ marginRight: isIcon ? '12rpx' : null }">
			<slot name="icon">
				<uni-icons :type="icon" :color="iconColor" :size="iconSize" v-if="icon" :custom-prefix="customPrefix"
					style="margin-right: 12rpx"></uni-icons>
			</slot>
		</view>
		<view class="cell-bd">
			<slot>
				<view class="name" :style="nameStyle" v-if="name">
					{{ name }}
				</view>
				<view class="desc" v-if="desc">
					{{ desc }}
				</view>
			</slot>
		</view>
		<view class="cell-right">
			<slot name="tips">
				<text class="tips" :style="tipStyle" v-if="tips">{{ truncateString(tips) }}</text>
			</slot>
			<uni-icons type="right" color="#909399" v-if="arrow"></uni-icons>
		</view>
	</view>
</template>

<script setup>
	/**
	 * c-cell-item 列表组件
	 * @description c-cell-item 通用列表组件
	 * @property { String } name 列表标题名称
	 * @property { String } desc 列表描述
	 * @property { String } titleStyle 标题样式
	 * @property { String } icon 图标
	 * @property { Boolean } border 是否显示边框
	 * @property { String } tips 右侧提示
	 * @property { String|Object } tipsStyle 右侧提示样式
	 * @property { String } customPrefix 自定义图标	 
	 * @property { Boolean } arrow 是否显示箭头
	 * @event { Function } click 点击事件
	 * @example <c-cell-item name="头像"></c-cell-item>
	 */
	import {
		ref,
		useSlots
	} from 'vue';
	import _props from './props.js';

	const isIcon = ref(false);
	const slots = useSlots();
	const emits = defineEmits(['click']);

	if (slots.icon) {
		isIcon.value = true;
	}

	function handleClick() {
		emits('click');
	}

	function truncateString(tips) {
		if (tips.length > 16) {
			return tips.substring(0, 16) + '...';
		} else {
			return tips;
		}
	}

	const props = defineProps(_props);
</script>

<style lang="scss">
	.c-cell-item {
		@include f-between;
		padding: $margin-24;

		&.border {
			border-bottom: 1rpx solid mix($white-color, $border-color, 45%);
		}

		.cell-icon {}

		.cell-bd {
			flex: 1;

			.name {
				font-size: $font-30;
				color: $main-color;
				font-weight: 500;
			}

			.desc {
				@include ellipsis();
				font-size: $font-24;
				color: $tips-color;
			}
		}

		.cell-right {
			@include f-center;

			.tips {
				font-size: $font-24;
				color: $tips-color;
			}
		}
	}
</style>